<template>
  <div>
      <div class="loginwrap"  :style="backgroundDiv">
            <h1 style="color:#fff">Csgo登陆页面</h1>
            <div class="loginifo">
                <!-- <img src="../assets/login/csgo.jpg" alt=""> -->
                <span>账号</span><input type="text" v-model="uname">
                <span>密码</span><input type="password" v-model="upwd">
                <button @click="send">提交</button>
            </div>
      </div>
      
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
data () {
      return {     
          uname:'',
          upwd:'',  
        backgroundDiv: {
          backgroundImage: 'url(' + require('../assets/login/csgo_bg.jpg') + ')'
        }
      }
    },
    methods:{
        send(){
            var msg;
            this.$axios.get('http://127.0.0.1:4001/login',{
                params:{
                    uname:this.uname,
                    upwd:this.upwd
                }
            }).then((res)=>{
               if(res.data.code<0){
                   alert('账号或密码错误，请重新登陆');
                   return
               }
               msg={myimg:res.data.my[0].myimg,
               uname:res.data.my[0].uname
               }
               this.$store.commit('login');
               this.$store.commit('getloginmsg',msg)
            // console.log(res.data.my[0].myimg);
            // console.log(res.data.my[0].uname)
                    Toast({
  message: '登陆成功',
})
    this.$router.push('/')
               
            })
        }
    }
}
</script>

<style lang="scss">

.loginwrap{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align: center;
    height: 100vh;
    width: 100%;
    background-size:100% 100%; 
    background-repeat: no-repeat;
    span{
        font-size: 2em;
        color:aliceblue;
        padding-bottom: 10px;
    }
    input{
        line-height: 2em;
        border-radius: 5px;
       box-shadow: 10px 10px 5px #25262b;
       margin-bottom: 10px;
    }
    button{
        background-color: aqua;
        color:#000;
        margin-top:20px;
        line-height: 40px;
        border-radius: 30px;
        font-size: 2em;
    }
    .loginifo{
        margin-top:20vh;
        display:flex;
        flex-direction: column;
    }
}
</style>>